<template>
  <div class="celerityTableDesign widget-form-container" ref="celerityTableDesign" @click="hideRightOpera">
	<div class="queryList" ref="queryList">
		<vxe-form :data="queryParams" custom-layout>
			<draggable
				v-model="designPageJson.queryList" 
				v-bind="{group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget'}"
			>
				<transition-group name="fade" tag="div" class="widget-form-list">
					<template v-for="item in designPageJson.queryList">
						<div :key="item.id" :class="{ 'list': true, 'widget-view': true, 'hideFieldStatus': item.showFlag === 'N' }">
							<div class="widget-view-drag drag-widget">
								<vxe-form-item :title="item.label" :field="item.fieldName" :item-render="{}">
									<template #default="{ data }">
										<component :is="item.componentType" :config="item" :queryParams="data" :json="designPageJson"></component>
									</template>
								</vxe-form-item>
								<div class="operaItems">
									<div class="list" @click.stop="handleWidgetShow(item, 'queryList')">
										<i :class="{ 'gelineIconFont': true, 'geline-chakan_yulan': item.showFlag === 'Y', 'geline-jinzhichakan': item.showFlag === 'N' || item.showFlag === '' }"></i>
									</div>
									<div class="list" @click.stop="handleWidgetEdit(item, 'queryList')">
										<i class="gelineIconFont geline-zidingyishuju"></i>
									</div>
									<div class="list" @click.stop="handleWidgetDelete(item, 'queryList')">
										<i class="gelineIconFont geline-delete"></i>
									</div>
								</div>
							</div>
						</div>
					</template>
				</transition-group>
			</draggable>
				
			<vxe-form-item v-if="designPageJson.queryList.length !== 0">
				<vxe-button status="primary" size="mini" @click="searchQuery">
					<i class="vxe-icon-search"></i>
					搜索
				</vxe-button>
				<vxe-button size="mini">
					<i class="vxe-icon-refresh"></i>
					重置
				</vxe-button>
			</vxe-form-item>
		</vxe-form>
		<div class="addButton">
			<el-button type="primary" plain @click="addQueryDialog('query')">添加查询条件</el-button>
		</div>
	</div>
	
	<div class="fieldList" ref="fieldList">
		<div ref="rowBtnList">
			<div class="addButton">
				<vxe-button status="primary" content="添加按钮" @click="addBtnDialog('buttonList')"></vxe-button>
				<vxe-button status="primary" content="添加列表字段" @click="addFieldDialog"></vxe-button>
				<vxe-button status="primary" content="表格配置" @click="setupTableDialog"></vxe-button>
			</div>
			<div class="tableSwitchLayout">
				<div class="left">
					<div class="topBtnList" ref="topBtnList">
						<draggable
							v-model="designPageJson.buttonList" 
							v-bind="{group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget'}"
						>
							<transition-group name="fade" tag="div" class="widget-form-list">
								<template v-for="item in allButtonList">
									<div class="widget-view" :class="{ 'hideFieldStatus': item.showFlag === 'N' }" :key="item.id" @contextmenu.prevent="showRightOpera($event, item, 'buttonList')">
										<div class="widget-view-drag drag-widget">
											<vxe-button
												:status="item.buttonStatus"
												:type="item.buttonType"
												:size="item.buttonSize"
												:round="item.buttonRound"
												:disabled="item.isDisabled"
											>
												<i :class="item.buttonIcon"></i>
												{{ item.name }}
											</vxe-button>
											<div class="operaItems">
												<div class="list" @click.stop="handleWidgetShow(item, 'buttonList')">
													<i :class="{ 'gelineIconFont': true, 'geline-chakan_yulan': item.showFlag === 'Y', 'geline-jinzhichakan': item.showFlag === 'N' || item.showFlag === '' }"></i>
												</div>
												<div class="list" @click.stop="handleWidgetEdit(item, 'buttonList')">
													<i class="gelineIconFont geline-zidingyishuju"></i>
												</div>
												<div class="list" @click.stop="handleWidgetDelete(item, 'buttonList')">
													<i class="gelineIconFont geline-delete"></i>
												</div>
											</div>
										</div>
									</div>
								</template>
							</transition-group>
						</draggable>
					</div>
				</div>
				<div class="right" v-if="designPageJson.tableConfig.switchLayout">
					<el-tooltip class="item" effect="dark" content="表格列表布局" placement="top">
						<el-button type="text" @click="switchLayout" :class="{btn: true, active: switchLayoutStatus.includes('table')}" size="mini" icon="gelineIconFont geline-wuxuliebiao"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="九宫格布局" placement="top">
						<el-button type="text" @click="switchLayout" :class="{btn: true, active: switchLayoutStatus.includes('sudoku')}" size="mini" icon="gelineIconFont geline-iconfontzhizuobiaozhun0247"></el-button>
					</el-tooltip>
				</div>
			</div>
			<div class="tableLayout" v-if="switchLayoutStatus.includes('table')">
				
			</div>
			<div class="sudokuLayout" v-if="switchLayoutStatus.includes('sudoku')">
				<celeritySudokuLayout :tableList="tableList" :isChange="false" :columns="5" :imgHeight="100" :isPreview="true" selectType="radio" :imageFiled="scratchable.imageFiled" :infoFiled="scratchable.infoFiled" @change="checkSudokuArray" />
			</div>
		</div>
	</div>
	<!-- 查询新增或者编辑 -->
	<queryForm :dialog="queryDialog" :title="queryDialogTitle" :designPageJson="designPageJson" :info="queryInfo" :apiGatewayDict="apiGatewayDict" v-if="queryDialog" @queryClose="queryDialogClose"></queryForm>
	<!-- 按钮新增或者编辑 -->
	<btnForm :dialog="btnDialog" :title="btnDialogTitle" :pageType="pageType" :info="btnInfo" :buttonType="addBtnType" :designPageJson="designPageJson" :apiGatewayDict="apiGatewayDict" v-if="btnDialog" @btnClose="btnDialogClose"></btnForm>
	<!-- 字段列表新增或者编辑 -->
	<fieldForm :dialog="fieldDialog" :title="fieldDialogTitle" :apiGatewayDict="apiGatewayDict" :info="fieldInfo" :designPageJson="designPageJson" v-if="fieldDialog" @fieldClose="fieldDialogClose"></fieldForm>
	<!-- 表格配置 -->
	<tableForm :dialog="tableDialog" :info="tableInfo" v-if="tableDialog" @tableClose="tableDialogClose"></tableForm>
	<!-- 鼠标右键 -->
	<div class="widget-view-action" ref="widgetViewAction">
		<div class="list" v-if="operaItem.orderFlag || operaItem.orderFlag === ''"  @click.stop="handleWidgetSort(operaItem, 'fieldList')">
			<i class="el-icon-sort"></i>
			<span class="operaName">是否排序</span>
		</div>
		<div class="list" @click.stop="handleWidgetShow(operaItem, typeList)">
			<i :class="{ 'gelineIconFont': true, 'geline-chakan_yulan': operaItem.showFlag === 'Y', 'geline-jinzhichakan': operaItem.showFlag === 'N' || operaItem.showFlag === '' }"></i>
			<span class="operaName" v-if="operaItem.showFlag === 'Y'">隐藏</span>
			<span class="operaName" v-else>显示</span>
		</div>
		<div class="list" @click.stop="handleWidgetEdit(operaItem, typeList)">
			<i class="gelineIconFont geline-zidingyishuju"></i>
			<span class="operaName">编辑</span>
		</div>
		<div class="list" @click.stop="handleWidgetDelete(operaItem, typeList)">
			<i class="gelineIconFont geline-delete" ></i>
			<span class="operaName">删除</span>
		</div>
	</div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import btnForm from './components/btnForm'
import queryForm from './components/queryForm'
import fieldForm from './components/fieldForm'
import tableForm from './components/tableForm'
import celeritySudokuLayout from './celeritySudokuLayout'
import * as assembly from './pageComponents'

const uuId = (length = 20) => {
	let str = '0123456789';
	let _str = ''
	for (let i = 0; i < length; i++) {
		var rand = Math.floor(Math.random() * str.length)
		_str += str[rand];
	}
	return _str
}

const renderHmtlRole = (dataArry, data) => {
	return dataArry.includes(data)
}

const sortValue = (value) => {
	return value === 'Y' ? true : false
}

export default {
  name: 'celerityTableDesign',
  components: {
	...assembly,
    Draggable,
	btnForm,
	queryForm,
	fieldForm,
	tableForm,
	celeritySudokuLayout
  },
  props: {
    pageJson: {
		type: Object,
		default: () => {}
	},
	projectId: {
		type: String,
		default: ''
	},
	pageId: {
		type: String,
		default: '',
	},
	pageType: {
		type: String,
		default: ''
	},
	apiGatewayDict:  {
		type: Array,
		default: () => []
	},
	scratchable: {
		type: Object,
		default: () => ({
			imageFiled: 'img',
			infoFiled: [],
		})
	}
  },
  data() {
	return {
		// 默认为20位随机数字id
		uuId,
		// 验证查询是否渲染该Html
		renderHmtlRole,
		// 判断该值是否存在
		sortValue,
		// 页面json
		designPageJson: this.pageJson,
		// 查询条件
		queryDialogTitle: '',
		queryDialog: false,
		queryInfo: null,
		queryParams: {},
		queryType: '',
		queryOpera: false,
		// 按钮
		btnDialogTitle: '',
		btnDialog: false,
		btnInfo: null,
		addBtnType: '',
		// 列表字段
		tableList: [
			{
				serial: 1
			}
		],
		fieldDialogTitle: '',
		fieldDialog: false,
		fieldInfo: null,
		fieldList: this.pageJson.fieldList,
		// 右键操作信息
		contentMenuX: 0,
		contentMenuY: 0,
		operaItem: {
			showFlag: 'N'
		},
		typeList: null,
		// 表格设置
		tableDialog: false,
		tableInfo: null,
		sortable: null,
		minusIndex: 0,
		// 切换布局状态，默认为table
		switchLayoutStatus: 'table'
	}
  },
  computed: {
	styleName () {
		return {
			left: `${this.contentMenuX}px`,
			top: `${this.contentMenuY}px`
		}
	},
	allButtonList () {
		const data = this.designPageJson.buttonList.filter(item => {
			return item.buttonPosition === 'all'
		})
		return data
	}
  },
  watch: {
	'designPageJson.tableConfig': function() {
		this.minusIndex = 0
		this.updateTableIndex()
	},
	'designPageJson.tableConfig.serial': function() {
		this.minusIndex = 0
		this.updateTableIndex()
	},
	'designPageJson.tableConfig.selection': function() {
		this.minusIndex = 0
		this.updateTableIndex()
	}  
  },
  created () {
	this.tableInfo = this.designPageJson.tableConfig
  },
  mounted() {
    // 阻止默认行为
	document.body.ondrop = function (event) {
		event.preventDefault();
		event.stopPropagation();
	};

	this.updateView()
  },
  methods: {
	// 更新视图
	updateView() {
		this.$forceUpdate();
	},
	// 显示右键操作
	showRightOpera($event, item, typeList) {
		// console.log($event, this.$refs.celerityTableDesign.offsetLeft)
		this.contentMenuX = $event.pageX - this.$refs.celerityTableDesign.offsetLeft - 60;
		this.contentMenuY = $event.pageY - this.$refs.celerityTableDesign.offsetTop;
		this.operaItem = item
		this.typeList = typeList
		this.$refs.widgetViewAction.style.cssText = `display:block; left: ${this.contentMenuX}px; top: ${this.contentMenuY}px`
	},
	hideRightOpera() {
		this.$refs.widgetViewAction.style.cssText = 'display: none; left: 0px; top: 0px'
	},
	handleMoveEnd ({newIndex, oldIndex}) {
		console.log('index', newIndex, oldIndex)
	},
	clickFun(e) {
		console.log(e)
	},
	// 添加查询条件
	addQueryDialog() {
		this.queryDialogTitle = '添加查询条件'
		this.queryDialog = true
		this.queryInfo = {
			id: this.uuId(),
			label: "",
			fieldName: "", 
			componentType: "",
			dataSource: "",
			dictLabel: "",
			dictValue: "",
			showFlag: "Y"
		}
	},
	// 设置查询按钮的事件
	setUpQueryBtn() {
	},
	// 修改查询条件数据
	queryDialogClose(flag, data) {
		flag = typeof flag !== "boolean" ? false : flag;
		this.queryDialog = false;
		if (data) {
			const index = this.designPageJson.queryList.findIndex(res => res.id === data.id)
			if (index !== -1) {
				this.designPageJson.queryList[index] = data
			} else {
				this.designPageJson.queryList.push(data)
			}
		}
		this.queryInfo = null;
		this.updateView()
	},
	// 输出搜索字段
	searchQuery() {
		console.log(this.queryParams);
		return false
		// this.$emit('searchQuery', this.queryParams)
	},
	// 重置搜索字段
	resetQuery() {
		this.$emit('resetQuery', this.queryParams)
		this.queryParams = {}
	},
	// 克隆
    handleWidgetClone(item) { 
        console.log(item, this.designPageJson)
    },
	// 编辑操作
	handleWidgetEdit(item, listType) {
		if (listType === 'topBtnList' || listType === 'rowBtnList') {
			this.btnDialog = true;
			this.btnDialogTitle = '编辑按钮'
			this.btnInfo = item
			this.addBtnType = listType
		}
		if (listType === 'queryList') {
			this.queryDialogTitle = '编辑查询条件'
			this.queryDialog = true
			this.queryInfo = item
		}
		if (listType === 'fieldList') {
			this.fieldDialogTitle = '编辑列表字段'
			this.fieldDialog = true
			this.fieldInfo = item
		}
		this.hideRightOpera()
	},
	// 修改按钮数据
	btnDialogClose(flag, data) {
		flag = typeof flag !== "boolean" ? false : flag;
		this.btnDialog = false;
		if (data) {
			const index = this.designPageJson[this.addBtnType].findIndex(res => res.id === data.id)
			if (index !== -1) {
				if (this.addBtnType !== 'rowBtnList') {
					this.designPageJson[this.addBtnType][index] = data
				} else {
					// 表格按钮的数据对象类型直接替换后视图不更新。（不知道为什么 - -！！！）
					const objAssign = Object.assign(this.designPageJson[this.addBtnType][index], data)
					this.designPageJson[this.addBtnType][index] = objAssign
				}
			} else {
				this.designPageJson[this.addBtnType].push(data)
			}
		}
		this.btnInfo = null;
		this.updateView()
	},
	// 显示与否
	handleWidgetShow(item, typeList) {
		const index = this.designPageJson[typeList].findIndex(res => res.id === item.id)
		this.designPageJson[typeList][index].showFlag = this.designPageJson[typeList][index].showFlag === 'Y' ? 'N' : 'Y';
	},
	// 按钮跳转表单设计
	handleWidgetDesignForm(item) {
		this.$emit('btnToForm', item)
		this.hideRightOpera()
	},
	// 添加按钮
	addBtnDialog(type) {
		this.addBtnType = type
		this.btnDialog = true;
		this.btnDialogTitle = '添加按钮'
		this.btnInfo = {
			id: this.uuId(),
			projectId: this.projectId,
			pageId: this.pageId,
		}
	},
	// 删除操作
    handleWidgetDelete(item, listType) {
		const index = this.designPageJson[listType].findIndex(res => res.id === item.id)
		this.designPageJson[listType].splice(index, 1);
		this.hideRightOpera()
    },
	// 添加字段列表数据
	addFieldDialog() {
		this.fieldDialogTitle = '添加列表字段'
		this.fieldDialog = true
		this.fieldInfo = {
			id: this.uuId(),
			columnLabel: '',
			columnName: '',
			fieldName: '',
			jsCode: "",
			dictType: '',
			orderFlag: "N",
			showFlag: 'Y',
			width: "",
			rowPosition: "left",
			sysPageType: '',
			openPageId: '',
			openPagePara: '',
			openPageName: '',
			sysPageShow: '',
			btnSubmitGateway: '',
			btnSubmitUrl: '',
			btnSubmitMethod: '',
			oldDataFlag: "N",
			defaultValue: '',
			required: false,
			autoLoad: false,
			requestData: '',
			showPara: '',
		}
	},
	// 修改字段数据
	fieldDialogClose(flag, data) {
		flag = typeof flag !== "boolean" ? false : flag;
		this.fieldDialog = false;
		if (data) {
			const index = this.designPageJson.fieldList.findIndex(res => res.id === data.id)
			if (index !== -1) {
				const objAssign = Object.assign(this.designPageJson.fieldList[index], data)
				this.designPageJson.fieldList[index] = objAssign
			} else {
				this.designPageJson.fieldList.push(data)
			}
		}
		this.fieldInfo = null;
	},
	// 修改字段排序状态
	handleWidgetSort(item, typeList) {
		const index = this.designPageJson[typeList].findIndex(res => res.id === item.id)
		this.designPageJson[typeList][index].orderFlag = this.designPageJson[typeList][index].orderFlag === 'Y' ? 'N' : 'Y';
		this.hideRightOpera()
	},
	// 修改table列索引
	updateTableIndex() {
		const minusArray = ['serial', 'selection']
		minusArray.forEach(res => {
			if (this.designPageJson.tableConfig[res]) {
				this.minusIndex += 1
			}
		})
	},
	// Table列拖拽
	columnDrop() {
		this.updateTableIndex()
		const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
		this.sortable = Sortable.create(wrapperTr, {
			animation: 1000,
			delay: 0,
			dataIdAttr: "data-id",
			handle:".draggableItem",
			onEnd: evt => {
				const oldItem = this.designPageJson.fieldList[evt.oldIndex - this.minusIndex]
				if (oldItem) {
					// console.log(this.designPageJson.fieldList, evt.oldIndex - this.minusIndex, evt.newIndex - this.minusIndex)
					// this.designPageJson.fieldList.splice(evt.oldIndex - this.minusIndex, 1)
					// this.designPageJson.fieldList.splice(evt.newIndex - this.minusIndex, 0, oldItem)
					this.fieldList.splice(evt.oldIndex - this.minusIndex, 1)
					this.fieldList.splice(evt.newIndex - this.minusIndex, 0, oldItem)
				}
				
			}
		})
		// this.updateView()
	},
	// 表格设置
	setupTableDialog() {
		// console.log(this.designPageJson.tableConfig)
		this.tableDialog = true
	},
	tableDialogClose(flag, data) {
		flag = typeof flag !== "boolean" ? false : flag;
		this.tableDialog = false;
		if (data) {
			this.designPageJson.tableConfig = Object.assign(this.designPageJson.tableConfig, data)
			this.tableInfo = data
		}
	},
	// 返回json给父组件
	getJson(val) {
		return new Promise((resolve, reject) => {
			if (val) {
				resolve(this.designPageJson)
			} else {
				reject({})
			}
		})
	},
	// 返回按钮事件的信息给父组件
	buttonEvent(item) {
		this.$emit('buttonEvent', item)
	},
	// 返回字典数据
	returnDictData(dictName) {
		let dataArry = undefined;
		this.designPageJson.pageDict.forEach(res => {
			if (Object.is(res.value, dictName)) {
				dataArry = res.children
			}
		})
		return dataArry
	},
	// 切换布局显示
	switchLayout() {
		this.switchLayoutStatus = this.switchLayoutStatus === 'table' ? 'sudoku' : 'table'
	},
	// 获取九宫格选中的数组
	checkSudokuArray(array) {
		console.log(array)
	},
	// 编辑页面样式
	editPageStyle() {
		
	},
	componentValue(item, rowIndex) {
		this.tableList[rowIndex] = item;
		// console.log(this.tableList)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import './fonts/TableMaking.css';
  .celerityTableDesign {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 10px;
  }
  .widget-form-container.celerityTableDesign .widget-form-list .widget-view {
		display: inline-block;
		border: 1px solid transparent;
		transition: .4s;
		background-color: transparent;
  }
  .widget-form-container.celerityTableDesign .widget-form-list .widget-view:hover {
		background-color: #f2f9ff;
		border-color: #409EFF
  }
  .widget-form-container.celerityTableDesign .generalTable .widget-form-list .widget-view:hover {
		background-color: transparent;
		border-color: transparent
  }
  .widget-form-container.celerityTableDesign .widget-view /deep/ .el-form-item {
		margin-bottom: 0;
		margin-right: 0;
  }
  .widget-form-container.celerityTableDesign .widget-view /deep/ .el-form-item__label {
		line-height: 32px;
  }
  .widget-form-container.celerityTableDesign .widget-form-list {
		border: none;
  }
  .celerityTableDesign .widget-view-action {
		width: 100px;
		white-space: nowrap;
		background-color: #2dbdfc;
		padding: 6px 10px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: auto;
		display: none;
		z-index: 19
  }
  .celerityTableDesign .widget-view-action .list {
		cursor: pointer;
		line-height: 26px;
  }
  .celerityTableDesign .widget-view-action .gelineIconFont,
  .celerityTableDesign .widget-view-action .el-icon-edit,
  .celerityTableDesign .widget-view-action .el-icon-sort {
		display: inline-block;
		color: #fff;
		font-size: 12px;
		width: 20px
  }
  .celerityTableDesign .widget-view-action .operaName {
		color: #fff;
		font-size: 12px;
		margin-left: 5px;
  }
  .celerityTableDesign .queryList .el-form--inline .el-form-item {
		margin-bottom: 0px
  }
  .celerityTableDesign .queryList {
		min-height: 60px;
  }
  .celerityTableDesign .queryList,   .celerityTableDesign .fieldList {
		margin-bottom: 25px;
		position: relative
  }
  .celerityTableDesign .addButton {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 18
  }
  .celerityTableDesign .widget-form-list.tableHeader {
		border: none;
		flex: 1;
		background-color: transparent;
		padding: 20px 0 10px;
  }
  .celerityTableDesign .widget-form-list.tableHeader .list {
		position: static;
		padding: 0;
		background-color: transparent;
		min-height: inherit;
		margin: 0;
  }
  .celerityTableDesign .widget-form-list.hideFieldStatus {
		background-color: #eff0f2
  }
  .widget-form-container.celerityTableDesign .widget-form-list {
		border: none;
  }
  .widget-form-container.celerityTableDesign .widget-form-list .hideFieldStatus {
		background-color: #eff0f2
  }
  .celerityTableDesign .fieldList /deep/ .el-table__header th {
		border: 1px solid transparent;
		cursor: move;
		transition: .4s;
		padding: 0;
  }
  .celerityTableDesign .fieldList /deep/ .el-table--small .el-table__cell {
		padding: 0;
  }
  .celerityTableDesign .fieldList /deep/ .el-table__header .el-table__cell:hover {
		background-color: #f2f9ff;
		border-color: #409EFF;
  }
  .celerityTableDesign .fieldList /deep/ th>.cell {
		display: flex !important;
		padding-left: ;
  }
  .celerityTableDesign .fieldList /deep/ .el-table .caret-wrapper {
		height: 23px;
		margin-top: 21px;
  }
  .celerityTableDesign .fieldList /deep/ .el-table .sort-caret.ascending {
		top: 0px;
  }
  .celerityTableDesign .fieldList /deep/ .sort-caret.descending {
		bottom: 0px;
  }
  .celerityTableDesign .operaItems {
		position: absolute;
		top: 4px;
		right: 12px;
		display: flex;
		z-index: 10;
  }
  
  .celerityTableDesign .operaItems .list {
		width: 16px;
		height: 16px;
		line-height: 16px;
		margin-right: 5px;
		z-index: 10;
		cursor: pointer;
		position: relative;
		text-align: center
  }
  
  .celerityTableDesign .operaItems .list:nth-last-of-type(1) {
		margin-right: 0;
  }
  .celerityTableDesign .designTagTitle {
		padding-left: 15px;
		border-left: 4px solid #0E4AF0;
		font-weight: bold;
		margin-bottom: 20px;
		font-size: 18px;
		line-height: 32px;
	}
  .celerityTableDesign .pagetitle {
		font-size: 20px;
		color: #000;
		font-weight: bold
	}
  .celerityTableDesign .designPageTop {
		margin-bottom: 10px;
		padding: 10px 0;
		border-bottom: 1px solid #409eff;
		display: flex;
		justify-content: space-between;
  }
  .celerityTableDesign .tableSwitchLayout {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
  }
  .celerityTableDesign .tableSwitchLayout .right {
		padding-top: 26px;
  }
  .celerityTableDesign .fieldList .addButton {
		position: static;
		text-align: right;
  }
  .celerityTableDesign .tableSwitchLayout .btn {
		padding: 0px;
		color: #999;
  }
  .celerityTableDesign .tableSwitchLayout .btn.active {
		color: #409EFF
  }
  .celerityTableDesign /deep/ .el-table__fixed-right {
		z-index: 12
  }
</style>
